<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/login/css/common.css">
    <link rel="stylesheet" href="/login/css/login.css">
    <script src="/login/js/login.js"></script>
    <script src="/login/js/register.js"></script>
    <title>欢迎登陆</title>
</head>

<body>

    <!-- 内容  start-->
    <div class="container">
        <div class="wrap">
            <div class="form_box">
                <!-- 注册 -->
                <div class="register_box hidden">
                    <h1>注册</h1>
                    <input type="text" id="username" placeholder="用户名">
                    <p id="usernamep"></p>
                    <input type="password" id="password2" placeholder="密码">
                    <p id="passwordp"></p>
                    <input type="email" placeholder="邮箱" id="emil">
                    <p id="emilp"></p>
                    <input type="password"  placeholder="确认密码" id="rpassword">
                    <p id="rpasswordp"></p>
                    <button class="re"  id="sub">注册</button>
<!--                    <button class="reset" id="reset">重置</button>-->
                </div>
                <!-- 登录 -->
                <div class="login_box">
                    <h1>登录</h1>
                    <input type="text" placeholder="用户名" id="customername" name="用户名">
                    <input type="password" placeholder="密码" id="password" name="密码">
                    <button id="loginButton" name="登录按钮">登录</button>
                </div>
            </div>
            <div class="con_box left">
                <!-- <h2>欢迎来到<span class="font">客户关系管理系统</span></h2> -->
                <p>欢迎来到客户关系管理系统</p>
                <img src="/login/images/team.jpg" alt="">
                <p>已有帐号</p>
                <div id="login"><button title="login">去登陆</button></div>
            </div>
            <div class="con_box right">
                <!-- <h2>欢迎来到<span class="font">汉服之家</span></h2> -->
                <p>欢迎来到客户关系管理系统</p>
                <img src="/login/images/team.jpg" alt="">
                <p>没有帐号?</p>
                <div id="register"><button title="register">去注册</button></div>

            </div>
        </div>
    </div>
    <!-- 内容 end -->
</body>
<script src="/jquery/jquery-3.6.0.js"></script>
<!--登录-->
<script>
    /**
     localstorage    缓存    永久性存储
     sessionstorage  缓存    单页面存储
     */
    $("#loginButton").click(function () {
        let customername = $("#customername").val();
        if(customername == null || customername == '') {
            alert("请输入用户名！");
            return;
        }
        let password = $("#password").val();
        if(password == null || password == '') {
            alert("请输入密码！");
            return;
        }
        $.ajax({
            url:"/customer/login",           // 请求路径
            type:"post",                  // 请求的方式，不区分大小写
            cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            data: {
                customername:customername,
                password:password
            },  // {'username':'admin12', 'password':'123456'}
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            success:function(response){
                console.log("返回: " + response);
                if(response.code === 200) {
                    // alert(JSON.stringify(response.customer))
                    alert("登录成功!");
                    // 在当前页中存储用户的登录数据
                    // sessionStorage.setItem("user", JSON.stringify(response.data));   // Storaged缓存只能存储字符串内容，不能存储对象内容
                    sessionStorage.setItem("customer", JSON.stringify(response.customer));   // Storaged缓存只能存储字符串内容，不能存储对象内容
                    // sessionStorage只存在与当前页面窗口中，并且用户关闭窗口，数据就会丢失
                    // localStorage存在与整个浏览器中，用户关闭窗口，不会丢失，只能用户手动清除缓存，才会丢失
                    // 从当前页面切换到index页面
                    window.location.href="/home.html";
                }
                else {
                    alert(response.msg);
                }
            },
            error:function(response){
                console.log("出错返回: " + response);
            }
        });
    });
</script>
<!--注册-->
<script>
    const username = document.getElementById("username")
    const usernamep = document.getElementById("usernamep")
    const email = document.getElementById("emil")
    const emilp = document.getElementById("emilp")
    let password = document.getElementById("password2")
    const passwordp = document.getElementById("passwordp")
    const rpassword = document.getElementById("rpassword")
    const rpasswordp = document.getElementById("rpasswordp")
    let a = 0;
    let b = 0;
    let c = 0;
    let d = 0;
    username.addEventListener("blur", function () {
        // console.log("===")
        if (username.value == "") {
            usernamep.innerHTML = "用户名不能为空"
            usernamep.style.color = "red"
        }else{
            usernamep.innerHTML = ""
            a=1
        }
    })
    email.addEventListener("blur", function () {
        if (email.value == "") {
            emilp.innerHTML = "邮箱不能为空"
            emilp.style.color = "red"
        } else {
            let result2 = /^[a-zA-Z0-9]+[@][a-zA-Z0-9]+\.(com|cn|net|org)$/.test(emil.value)
            if (result2) {
                emilp.innerHTML = "邮箱格式正确"
                emilp.style.color = "green"
                b = 1
            }
            else {
                emilp.innerHTML = "邮箱格式错误"
                emilp.style.color = "red"
            }
        }

    })
    password.addEventListener("blur", function () {
        if (password.value == "") {
            passwordp.innerHTML = "密码不能为空"
            passwordp.style.color = "red"
        }else{
            passwordp.innerHTML = ""
            c = 1
        }
        // } else {
        //     let result3 = /^[a-zA-Z]{1,2}[0-9|*|&|.|@]{4,10}/.test(password.value)
        //     if (result3) {
        //         passwordp.innerHTML = "密码格式正确"
        //         passwordp.style.color = "green"
        //         c = 1
        //     }
        //     else {
        //         passwordp.innerHTML = "密码格式错误"
        //         passwordp.style.color = "red"
        //     }
        // }
    })

    rpassword.addEventListener("blur", function (event) {
        if (rpassword.value == "") {
            rpasswordp.innerHTML = "确认密码不能为空"
            rpasswordp.style.color = "red"
        } else {
            if (password.value === rpassword.value) {
                rpasswordp.innerHTML = "确认密码正确"
                rpasswordp.style.color = "green"
                d = 1
            } else {
                rpasswordp.innerHTML = "确认密码错误"
                rpasswordp.style.color = "red"
            }
        }
    })
    const sub = document.getElementById("sub")


    sub.addEventListener('click', function (event) {
        alert(username.value+" "+password.value+" "+email.value)
        let flag = 1
        if (a === 0) {
            alert("用户名错误，请重新输入")
            flag = 0
        }
        if (b === 0) {
            alert("邮箱错误，请重新输入")
            flag = 0
        }
        if (c === 0 || d === 0) {
            alert("密码错误，请重新输入")
            flag = 0
        }
        if (flag === 1) {
            event.preventDefault()
            $.ajax({
                url:"/customer/register",           // 请求路径
                type:"post",                  // 请求的方式，不区分大小写
                cache:false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                data: {
                    customername:username.value,
                    password:password.value,
                    email:email.value
                },  // {'username':'admin12', 'password':'123456'}
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                success:function(response){
                    console.log("返回: " + response);
                    if(response.code === 200) {
                        alert("注册成功!");
                        window.location.href="/login.html";
                    }
                    else {
                        alert(response.msg);
                    }
                },
                error:function(response){
                    console.log("出错返回: " + response);
                }
            });

            // location.href = "login.html"
        }
    })

</script>

</html>